<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>污染防治设施</text>
		</view>
	</view>
	<scroll-view scroll-y="true" class="scroll-container">
		<view class="body">
			<view class="container">
				<view class="content">
					<view class="boc" v-for="item in data">
						<text>{{item.name}}</text>
						<text>{{item.value}}</text>
					</view>
				</view>
				<view class="erweiam">
					<view class="baoliu">
					  保存二维码到本地
					</view>
					<view class="biankuang">
						<view class="zz">
							郑州市生态环境局制
						</view>
					</view>
					<button class="sbwed">停用设施</button>
				</view>
			</view>
		</view>
	</scroll-view>
	
</template>

<script setup>
import { ref } from 'vue';

var data = ref(
 [
    {"name": "设施名称", "value": "废气洗涤塔"},
    {"name": "设施编码", "value": "123456789"},
    {"name": "设施类型", "value": "废气"},
    {"name": "设施规格型号", "value": "测试1"},
    {"name": "废气处理量(m³/h)", "value": "测试1"},
    {"name": "处理工艺", "value": "吸附"},
    {"name": "设计参数温度(℃)", "value": "测试1"},
    {"name": "设计参数压力", "value": "测试1"},
    {"name": "设计参数风量(m³/h)", "value": "吸附"},
    {"name": "环保管理员1", "value": "李强"},
    {"name": "手机号", "value": "1234567890"},
    {"name": "环保管理员2", "value": "李国"},
    {"name": "手机号", "value": "1234567890"}
]
)
function back () {
	uni.navigateBack({
		delta:1,
	})
}
</script>

<style lang="scss" scoped>
	.scroll-container{
		height: calc(100vh - 142rpx); /* 头部高度 + 搜索区域高度 */
		// overflow: auto;
	}
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100vh;

		.container {
			width: 750rpx;

			.content {
				width: 670rpx;
				
				margin: 0 auto;

				.boc {
					margin-top: 54rpx;
					width: 670rpx;
					display: flex;
					justify-content: space-between;
                     align-items: center;
					 background-color: #FFFFFF;
					text {
						height: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #333333;
						line-height: 26rpx;
					}
				}
               
			}
		}
	}
	.erweiam{
		width: 690rpx;
		height: 680rpx;
		// background-color: red;
		margin: 0 auto;
		 margin-top: 82rpx;
		 position: relative;
		 .baoliu{
			 width: 274rpx;
			 height: 43rpx;
			 background: #047AE1;
			 border-radius: 7rpx;
			 text-align: center;
			 font-family: Source Han Sans CN;
			 font-weight: 400;
			 font-size: 23rpx;
			 color: #FFFFFF;
			 line-height: 43rpx;
			 margin: 0 auto;
		 }
		 .biankuang{
			 width: 378rpx;
			 height: 368rpx;
			 background-image: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/erweima.png");
			background-size: cover;
			 background-repeat: no-repeat;
			background-position: center;
			position: absolute;
			top: 60rpx;
			left: 120rpx;
			.zz{
				height: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 21rpx;
				color: #333333;
				line-height: 20rpx;
				position: absolute;
				top: 320rpx;
				left: 120rpx;
			}
			
		 }
		 .sbwed{
		 	width: 672rpx;
		 	height: 88rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 31rpx;
			color: #FFFFFF;
		 	background: #0874FA;
		 	border-radius: 44rpx;
			position: absolute;
			bottom: 100rpx;
			left: 10rpx;
		 }
			   }
</style>